<template>
  <div class="content">
    <div style="height: 35px; line-height: 35px">
      <h5>数据统计与分析</h5>
    </div>
    <div class="title_box">
      <div class="card_box">
        <el-progress
          :percentage="70"
          type="circle"
          :stroke-width="10"
          :format="format"
        />
        <div class="card_text_box">
          <div class="flex_box_my">
            <div class="process_box_my"></div>
            <el-statistic title="日活跃用户数" :value="outputValue" />
          </div>
          <div class="flex_box_my">
            <div
              class="process_box_my"
              style="background-color: rgb(197.7, 225.9, 255)"
            ></div>
            <el-statistic title="每账户会话时长度" :value="outputValue" />
          </div>
        </div>
      </div>
      <div class="card_box">
        <el-progress
          :percentage="50"
          type="circle"
          :stroke-width="10"
          :format="format2"
          color="#86ade1"
        />
        <div class="card_text_box">
          <div class="flex_box_my">
            <div class="process_box_my" style="background-color: #86ade1"></div>
            <el-statistic title="IP访问统计" :value="outputValue" />
          </div>
          <div class="flex_box_my">
            <div class="process_box_my" style="background-color: #d5eafb"></div>
            <el-statistic title="流量数据分析" :value="outputValue" />
          </div>
        </div>
      </div>
      <div class="card_box">
        <el-progress
          :percentage="90"
          type="circle"
          :stroke-width="10"
          :format="format3"
          color="#9762d3"
        />
        <div class="card_text_box">
          <div class="flex_box_my">
            <div class="process_box_my" style="background-color: #9762d3"></div>
            <el-statistic title="在线设备" :value="outputValue" />
          </div>
          <div class="flex_box_my">
            <div class="process_box_my" style="background-color: #bcb0f9"></div>
            <el-statistic title="离线设备" :value="outputValue" />
          </div>
        </div>
      </div>
    </div>
    <div class="content_box">
      <h5>日志记录</h5>
      <div class="header_right">
        <el-form :inline="true" :model="searFrom" class="form_box">
          <el-form-item>
            <el-input
              v-model="searFrom.name"
              placeholder="日志类型"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searFrom.code"
              placeholder="日志内容"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
        max-height="300"
      >
        <el-table-column type="index" :index="indexMethod" />
        <el-table-column prop="name" label="字段1" />
        <el-table-column prop="code" label="字段2" />
        <el-table-column prop="code" label="字段3" />
        <el-table-column prop="code" label="字段4" />
        <el-table-column prop="code" label="字段5" />
        <el-table-column prop="code" label="字段6" />
        <el-table-column prop="code" label="字段7" />
        <el-table-column prop="code" label="字段8" />
        <el-table-column prop="code" label="字段9" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <div class="icon_content">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="编辑"
                placement="top-start"
              >
                <div class="icon_box">
                  <el-icon @click="edit(row)" size="20" color="#71778d"
                    ><EditPen
                  /></el-icon>
                </div>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <div class="icon_box_d">
                  <el-icon @click="remove(row)" size="20" color="#71778d"
                    ><Remove
                  /></el-icon>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_box">
        <el-pagination
          v-model:current-page="searFrom.pageNo"
          v-model:page-size="searFrom.pageSize"
          :page-sizes="[10, 50, 100, 150]"
          small="small"
          :disabled="false"
          :background="true"
          layout="sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineOptions, ref, onBeforeMount } from "vue";
import * as tenantApi from "../../api/project1/ip/ip.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import confirm from "../../utils/ElMessageUtils.js";
import { useTransition } from "@vueuse/core";

defineOptions({ name: "home" });

const tableData = ref([]);

const objectForm = ref({
  name: "",
  description: "",
  isActive: 0,
});

const router = new useRouter();

let searFrom = ref({
  pageNo: 1,
  pageSize: 10,
  excludeCode: "admin",
});

let total = ref(0);

const source = ref(0);
const outputValue = useTransition(source, {
  duration: 1500,
});
source.value = 172000;

const format = (percentage) => "活跃度统计";
const format2 = (percentage) => "流量监控";
const format3 = (percentage) => "设备状态";

onBeforeMount(() => {
  // init();
});
</script>

<style lang="less" scoped>
.title_box {
  width: 99%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  height: 25%;
}
.content_box {
  width: 99%;
  margin: auto;
  margin-top: 20px;
}
.card_box {
  width: 25%;
  height: 99%;
  box-shadow: 2px 0px 5px 1px gainsboro;
  border-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.count_img {
  width: 30%;
  height: 50%;
}
.card_text_box {
  width: 40%;
}
.flex_box_my {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.process_box_my {
  width: 20%;
  height: 3px;
  background: #409eff;
  border-radius: 15px;
}
.header_right {
  display: flex;
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
  width: 100%;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
</style>